<template>
    <div style="width:100%;height:100%;overflow:hidden">
        <div id="map">
              <el-button type="primary" id='pause' size="small"></el-button>
        </div>
    </div>
</template>
<script>
import mapboxgl from 'mapbox-gl'
export default {
    data () {
        return {
         map:null,
         geojson:null,
         speedFactor:30,
         animation:undefined,
         startTime:0,
         progress:0,
         resetTime:false,
         pauseButton:undefined
        }
    },
    mounted(){
      this.init()
    },
    methods: {
        init(){
            // this.smartmapx.mapbase = 'http://www.smartmapx.com';
            // this.smartmapx.apikey = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJuYmYiOjE1MzcxODM1OTgsImRhdGEiOiJ7XCJsb2dpbl9uYW1lXCI6XCJyb290XCIsXCJnZW5kZXJcIjoyLFwidXNlcl9pZFwiOlwiZm1fc3lzdGVtX3VzZXJfcm9vdFwiLFwidXNlcl9uYW1lXCI6XCJyb290XCIsXCJ1c2VyX29yaWdpbl9pZFwiOlwiZm1fbG9jYWxcIixcInByb2R1Y3RfaWRcIjpcIlwiLFwiZXhwaXJlX3RpbWVcIjpcIlwiLFwic291cmNlX2lkXCI6XCJcIixcInR5cGVcIjpcIlwiLFwiY29ycF9pZFwiOlwiZm1fc3lzdGVtX2NvcnBcIn0iLCJleHAiOjQwOTI1OTkzNDksImp0aSI6ImFfNjhmZjBhZGY5OTcxNDQ0NThjNzViZWFiN2FjNTkzYWYifQ.W122WkT6QR4HZWbpalkpmirV9JWkDYcCkmNZoxCB_z8';
            // this.map=new this.smartmapx.Map({
            //     container: 'map',
            //     mapId: 'map_id_23',
            //     center: [-87.61694, 41.86625],
            //     zoom: 15.99,
            //     pitch: 40,
            //     bearing: 20,
            //     antialias: true
            // });
            // this.map.addControl(new this.smartmapx.NavigationControl(),'top-right');
            // this.map.addControl(new this.smartmapx.ScaleControl({
            //     maxWidth: 100,
            //     unit: 'm'
            // }));
            	this.mapbgl.accessToken = 'pk.eyJ1IjoiMTgzODI0ZHl0IiwiYSI6ImNqbHExNDVjZzI0ZmUza2wxMDhocnlyem4ifQ.FZoJzmqTtli8hAvvAc1OPA';
                this.map = new this.mapbgl.Map({
                    container: 'map',
                    style: 'mapbox://styles/mapbox/streets-v11',
                    center: [0, 0],
                    zoom: 0.5
                });
                this.geojson = {
                    'type': 'FeatureCollection',
                    'features': [
                    {
                    'type': 'Feature',
                    'geometry': {
                    'type': 'LineString',
                    'coordinates': [[0, 0]]
                     }
                   }
                 ]
                };
                
                // var speedFactor = 30; // number of frames per longitude degree
                // var animation; // to store and cancel the animation
                // var startTime = 0;
                // var progress = 0; // progress = timestamp - startTime
                // var resetTime = false; // indicator of whether time reset is needed for the animation
                this.pauseButton = document.getElementById('pause');
                
                this.map.on('load', ()=> {
                // add the line which will be modified in the animation
                this.map.addLayer({
                    'id': 'line-animation',
                    'type': 'line',
                    'source': {
                    'type': 'geojson',
                    'data': this.geojson
                },
                'layout': {
                    'line-cap': 'round',
                    'line-join': 'round'
                },
                'paint': {
                    'line-color': '#ed6498',
                    'line-width': 5,
                    'line-opacity': 0.8
                   }
                });
                
                this.startTime = performance.now();
                
                this.animateLine();
                
                // click the button to pause or play
                this.pauseButton.addEventListener('click', ()=> {
                this.pauseButton.classList.toggle('pause');
                if (this.pauseButton.classList.contains('pause')) {
                    cancelAnimationFrame(this.animation);
                } else {
                    this.resetTime = true;
                    this.animateLine();
                   }
                });
                
                // reset startTime and progress once the tab loses or gains focus
                // requestAnimationFrame also pauses on hidden tabs by default
                document.addEventListener('visibilitychange', ()=> {
                  this.resetTime = true;
                });
        })
    },
        animateLine(timestamp){
            if (this.resetTime) {
                // resume previous progress
                this.startTime = performance.now() - this.progress;
                this.resetTime = false;
                } else {
                this.progress = timestamp - this.startTime;
                }
                
                // restart if it finishes a loop
                if (this.progress > this.speedFactor * 360) {
                this.startTime = timestamp;
                this.geojson.features[0].geometry.coordinates = [];
                } else {
                var x = this.progress / this.speedFactor;
                // draw a sine wave with some math.
                var y = Math.sin((x * Math.PI) / 90) * 40;
                // append new coordinates to the lineString
                this.geojson.features[0].geometry.coordinates.push([x, y]);
                // then update the map
                this.map.getSource('line-animation').setData(this.geojson);
                }
                // Request the next frame of the animation.
                this.animation = requestAnimationFrame(this.animateLine);
            }
    }
}
</script>
<style scoped>
@import url('https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css');
#map{
    width:100%;
    height:100%
}
#pause {
    z-index: 30;
    position: absolute;
    margin: 20px;
}
 
#pause::after {
    content: 'Pause';
}
 
#pause.pause::after {
    content: 'Play';
}
</style>